<template>
  <el-form label-position="left" label-width="auto" class="zw-table-search">
    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="链接搜索">
          <el-input v-model="formData.title" placeholder="请输入链接标题" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="创建人">
          <!-- <el-select v-model="formData.created_uid" placeholder="全部员工">
            <el-option v-for="item in options" :key="item.id" :label="item.account" :value="item.id" />
          </el-select> -->
          <!-- <el-select v-model="formData.created_uid" ref="employeeSelectRef" multiple placeholder="全部员工" filterable remote :reserve-keyword="false" :loading="loading" :remote-method="remoteMethod" @click="remoteMethod()">
            <el-option v-for="item in options" :key="item.id" :label="item.account" :value="item.id" />
          </el-select> -->
          <el-select v-model="formData.created_uid" filterable placeholder="请选择创建员工">
            <el-option label="全部员工" value="" />
            <el-option v-for="item in options" :key="item.id" :label="item.account" :value="item.id" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="创建时间">
          <el-date-picker v-model="formData.created_at" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" type="daterange" start-placeholder="开始日期" range-separator="—" end-placeholder="结束日期" />
        </el-form-item>
      </el-col>
      <el-col>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button @click="onReset">清空</el-button>
      </el-col>
    </el-row>
  </el-form>
</template>

<script setup lang="ts">
  import { reactive, ref } from 'vue'
  import { getFounderList } from '@/ajax/api/messages/marketing/drainageLink'
  const emit = defineEmits(['submit'])
  // const founderData: any = ref([])
  const options: any = ref([])
  const formData = reactive({
    title: '', //标题
    created_uid: '', //创建人id
    created_at: [] //创建时间
  })
  getFounderList().then((res) => {
    // founderData.value = res
    options.value = res
  })
  // const loading = ref(false)
  // const remoteMethod = (query?: string) => {
  //   console.log(query, '1111111111')
  //   if (query) {
  //     loading.value = true
  //     setTimeout(() => {
  //       loading.value = false
  //       options.value = founderData.value.filter((item: any) => {
  //         return item.account.toLowerCase().includes(query.toLowerCase())
  //       })
  //     }, 200)
  //   } else {
  //     options.value = founderData.value
  //   }
  // }
  const onSubmit = () => {
    emit('submit', formData)
  }
  const onReset = () => {
    formData.title = ''
    formData.created_uid = ''
    formData.created_at = []
    onSubmit()
  }
</script>

<style lang="scss" scoped>
  .zw-table-search {
    padding: 16px;
    background-color: #f9f9f9;

    .el-row {
      margin: -6px -10px;

      .el-col {
        margin: 6px 0;

        &:last-of-type {
          flex: auto;
          text-align: right;
        }

        .el-form-item {
          margin-bottom: 0;

          .el-form-item__label-wrap {
            // margin-right: 0 !important;

            .el-form-item__label {
              font-size: 14px;
              font-family: STHeitiSC-Light, STHeitiSC;
              font-weight: 300;
              color: #33302d;
            }
          }

          .el-form-item__content {
            .el-input,
            .el-select,
            .el-date-editor {
              width: 100%;
            }
          }
        }
      }
    }
  }
</style>
